<template>
	<div id="HomeHeader">
		<div class="header-top">
			<div class="headertop-left" @click="toHome">
				<span class="iconfont">&#xe624;</span>
			</div>
			<div class="headertop-title">
				城市选择
			</div>
		</div>
		<div class="header-bottom">
			<span class="active">境内</span>
			<span>境外·港澳台</span>
		</div>
		
		
	</div>
</template>

<script>
export default {
	methods:{
		toHome (){
			this.$router.push("./")
		}
	}
}
</script>

<style scoped lang="stylus">
/*@import "../../../assets/css/var.styl"*/
@import "~css/var.styl"

	#HomeHeader{
		font-size: 0.14rem;
		background-color: $bgColor;
		text-align: center;
	}
	#HomeHeader .header-top{
		height: 0.4rem;
		line-height: 0.4rem;
		display: flex;
		text-align: center;
		align-items: center;
	}
	
	.headertop-left {
		font-weight: bold;
		width: 0.4rem;
		color: #FFFFFF;
	}
	.headertop-title {
		flex: 1;
        height: .3rem;
        line-height: .3rem;
        text-align: center;
        padding-left: .07rem;
        color: #FFFFFF;
        margin-left: -0.4rem;
        font-size: .16rem;
	}
	.header-bottom{
		height: 0.4rem;
		line-height: 0.4rem;
	}
	.header-bottom span{
		display: inline-block;
		width: 30%;
		height: .2rem;
		line-height: .2rem;
		background: $bgColor;
		border:1px  solid #FFFFFF;
		color: #FFFFFF;
		margin: 0 -0.02rem;
		padding: 0;
		
	}
	.header-bottom span.active{
		display: inline-block;
		width: 30%;
		height: .2rem;
		line-height: .2rem;
		background: #FFFFFF;
		color: $bgColor;	
	}
	
</style>